<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<title>MaziScript 在线写作平台</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/editormd.min.css">
    <link rel="stylesheet" href="css/cssMazi.css">
	<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">MaziScript在线写作系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                   <br />
                   <h4>目录</h4>
                </ul>
                <ul class="nav nav-sidebar" id="mazi_contents">
                    <!--<li>1</li>-->
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 edit" >
                <br /><br />
                <div id="test-editormd">
			        <textarea style="display:none;"></textarea>
	        	</div>
            </div>
        </div>
    </div>


    <!--以下为Javascript内容-->

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="lib/MaziScript.js"></script>
	<script type="text/javascript" src="editormd.js"></script>
    <!-- Editor基本参数 -->
    <script type="text/javascript">
			var testEditor;

            $(function() {
                testEditor = editormd("test-editormd", {
                    mazi            : true,
                    width           : "90%",
                    height          : 640,
                    path            : "lib/",
                    emoji           : true,
                    taskList        : true,
                    flowChart       : true, 
                    sequenceDiagram : true,

                    toolbarIcons : function(){
                        return ["mazi_submit", "mazi_save", "mazi_open", "|", 
                                "undo", "redo", "|", 
                                "bold", "del", "italic", "quote", "|", 
                                "list-ul", "list-ol", "hr", "|",
                                "link", "reference-link", "image",  "table", "datetime", "emoji", "html-entities", "|",
                                "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
                                "help", "info"];
                    },
                    toolbarIconsClass :{
                        mazi_submit : "fa-check",
                        mazi_save   : "fa-save",
                        mazi_open   : "fa-folder-open"
                    },
                    toolbarHandlers : {
                        mazi_submit : function(){
                            //this.executePlugin("submit", "/");
                        },
                        mazi_save : function(){
                            //TODO: 保存
                        },
                        mazi_open : function(){
                            //TODO: 打开
                            $("#maziUpload").click();
                        }
                    },
                    lang: {
                        toolbar: {
                            mazi_submit : "完成写作",
                            mazi_save   : "提交保存",
                            mazi_open   : "打开作品"
                        }
                    },

                    placeholder     : "试着写些什么……"
                });
            });
    </script>

    <input type="file" id="maziUpload" style="display:none">
    <script type="text/javascript" src="lib/jszip.js"></script>
    <script type="text/javascript" src="lib/jszip-utils.js"></script>
    <script type="text/javascript" src="js/zipMazi.js"></script>
    <script type="text/javascript" src="js/errMazi.js"></script>
    <script type="text/javascript">
        $("document").ready(function(){
            $("#maziUpload").change(function(evt) {
                var file = evt.target.files[0];

                var load = loadZip(file);
                var zipContent;

                load.then(function(zip){
                    zipContent = zip;
                    return zip;
                })
                .then(getMaziInfoJson)
                .then(function(maziInfo){
                    var info = JSON.parse(maziInfo);

                    var chapter_name = getMaziChapterNameList(info);
                    var chapter_fileName = getMaziChapterFileNameList(info);

                    for(var i in chapter_name){
                        $("#mazi_contents").append("<li id=\"" + chapter_fileName[i] + "\"><a href=\"" + "javascript:void(0);" + "\">" + chapter_name[i] + "</a></li>");

                        (function(vari){
                            $("#" + chapter_fileName[vari]).click(function(){
                            //增加保存
                                getMaziChapterJson(zipContent, chapter_fileName[vari]).then(
                                    function(content){
                                        (function(text){
                                            testEditor.setMarkdown(JSON.parse(text));
                                        })(content);
                                    }
                                );
                            });
                        })(i);
                        
                    }
                })
            });
        });
    </script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>